<template id='TempCheck'>
  <div class="TempCheck">
    <img :src="payIcon" class="payIcon" />
    <p>支付是否成功？</p>
    <div class="buttonList">
      <div class="unPaidButton" @click="unPaid()">未付款</div>
      <div class="paidButton" @click="isPaid()">
        {{ isPayName }}
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { checkOrderApi } from "@/api";
import { Toast } from "vant";
export default {
  name: "",
  components: {},
  // 定义属性
  data() {
    return {
      isPayName: "已付款",
      isDisabled: false,
      intervalId: "",
      payIcon: require("@/assets/images/mobile/payIcon.png"),
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    isPaid() {
      this.isPayName = "正在核验";
      this.checkOrder();
    },
    unPaid() {
      this.checkOrderInit();
    },

    async checkOrderInit() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      let result = await checkOrderApi({
        order_sn: this.$route.query.id,
      });
      if (result.code == 0) {
        Toast.success(result.message);
        this.$router.push({
          path: "/payCompleted",
          query: {
            id: this.$route.query.goods_id,
          },
        });
      } else {
        this.$router.push({
          path: "/unpaid",
        });
      }
    },

    checkOrder() {
      let that = this;
      let times = 10;
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: `正在核验，请等待 ${times} 秒`,
      });

      that.intervalId = setInterval(async () => {
        times--;
        toast.message = `正在核验，请等待 ${times} 秒`;
        let result = await checkOrderApi({
          order_sn: this.$route.query.id,
        });
        if (result.code == 0) {
          Toast.success(result.message);
          that.$router.push({
            path: "/payCompleted",
            query: {
              id: result.result.goods_id,
              order_id: result.result.order_id,
            },
          });
          clearInterval(that.intervalId);
        }
        if (times <= 0) {
          Toast.fail("支付失败，请重试");
          clearInterval(that.intervalId);
          setTimeout(() => {
            this.$router.push({
              path: "/unpaid",
            });
          }, 1000);
        }
      }, 1000);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.TempCheck {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100vh;
  width: 100%;
  padding: 0 210px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .payIcon {
    width: 120px;
    height: 120px;
    margin-top: 412px;
  }

  p {
    font-size: 36px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 36px;
    margin-top: 40px;
  }

  .buttonList {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;

    .unPaidButton,
    .paidButton {
      border-radius: 4px;
      border: 1px solid #ff8686;
      backdrop-filter: blur(3px);
      width: 144px;
      height: 52px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff8686;
      line-height: 52px;
      text-align: center;
    }

    .paidButton {
      border: 1px solid #00ffb0;
      color: #00ffb0;
    }
  }
}
</style>